<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="added">新增</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                v-loading="loading" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="name" label="名字" align="center"></el-table-column>
                <el-table-column prop="zhiwei" label="职位" align="center"></el-table-column>
                <el-table-column prop="xueli" label="学历" align="center"></el-table-column>
                <el-table-column prop="text" label="经历" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="text" icon="el-icon-edit" @click="handledel(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="type ? '新增人员' : '修改人员'" :visible.sync="AddAuth" width="50%" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名字中文">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="名字英文">
                    <el-input v-model="form.e_name"></el-input>
                </el-form-item>
                <el-form-item label="职位中文">
                    <el-input v-model="form.zhiwei"></el-input>
                </el-form-item>
                <el-form-item label="职位英文">
                    <el-input v-model="form.e_zhiwei"></el-input>
                </el-form-item>
                <el-form-item label="学历中文">
                    <el-input v-model="form.xueli"></el-input>
                </el-form-item>
                <el-form-item label="学历英文">
                    <el-input v-model="form.e_xueli"></el-input>
                </el-form-item>
                <el-form-item label="经历中文">
                    <quill-editor ref="myTextEditor" v-model="form.text" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item label="经历英文">
                    <quill-editor ref="myTextEditor" v-model="form.e_text" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="onSubmit">{{ type ? '立即创建' : '立即修改' }}</el-button>
                    <el-button @click="cancellation">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'
import { imgUploads } from "@/api/imgUplpads";


import VueCropper from 'vue-cropperjs';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {
    quillEditor
} from 'vue-quill-editor';
export default {
    name: 'BannerList',
    components: {
        VueCropper,
        quillEditor
    },
    data() {
        return {
            editorOption: {
                placeholder: 'Hello World'
            },
            type: false,
            AddAuth: false,
            loading: true,
            tableData: [],
            imageUrl: '',
            Token: '',
            form: {
                id: '',
                zhiwei: '',
                name: '',
                text: '',
                xueli: '',
                e_name: '',
                e_zhiwei: '',
                e_xueli: '',
                e_text: '',
            },
        };
    },
    created() {
        this.getData();

    },
    methods: {
        async getQiniuToken() {
            let info = await AxiosPost('/admin/login/qiniutoken', { scope: this.$store.state.scope_img })
            this.Token = info.data
        },
        async uplImage(file) {
            await this.getQiniuToken();
            let aa = await imgUploads(this.Token, this.$store.state.upload_qiniu, this.$store.state.banner_url, file.raw);
            if (aa.status === 1) {
                this.form.banner_url = aa.file;
                this.imageUrl = this.$store.state.show_qiniu_img + '/' + aa.file;
            } else if (aa.status === 2) {
                this.$message.error(aa.msg)
                this.$refs.upload.clearFiles();
            }
        },
        added() {
            this.form =  {
                id: '',
                zhiwei: '',
                name: '',
                text: '',
                xueli: '',
                e_name: '',
                e_zhiwei: '',
                e_xueli: '',
                e_text: '',
            }
            this.type = true
            this.AddAuth = true
        },
        async getData() {
            this.loading = true
            let info = await AxiosPost('/admin/shop_set/renyuanlist')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.loading = false
            info.data.forEach(item => {
                item.create_time = this.$moment(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
            })
            this.tableData = info.data
        },

        cancellation() {
            this.AddAuth = false
        },
        async onSubmit() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let info = await AxiosPost('/admin/shop_set/saverenyuan', this.form)
            loading.close();
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.AddAuth = false
            this.$message.success(info.message)
            this.getData();

        },
        // 编辑操作
        handleEdit(index, row) {
            this.form.id = row.id
            this.form.name = row.name
            this.form.text = row.text
            this.form.xueli = row.xueli
            this.form.zhiwei = row.zhiwei
            this.form.e_name = row.e_name
            this.form.e_zhiwei = row.e_zhiwei
            this.form.e_xueli = row.e_xueli
            this.form.e_text = row.e_text
            this.type = false
            this.AddAuth = true
        },
        handledel(index, row) {
            this.$confirm('此操作将会删除人员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let info = await AxiosPost('/admin/shop_set/saverenyuan', {
                    id:row.id,
                    if_del:1
                })
                if (info.code !== 10000) {
                    this.$message.error(info.message)
                    return false
                } else {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    }
};
//时间戳转换
</script>

<style>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
